<script lang='ts' setup>
import { ref, watch, reactive } from 'vue';
import AppMenuForm from './app-menu-form.vue';

const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'save-success'): void//新增保存 修改保存 成功回调
}>()

const props = defineProps({
    //是否显示
    visible: {
        type: Boolean,
        default: false
    },
    /**菜单id */
    menuId: String,
    /**父菜单id */
    parentMenuId: String
})
const AppMenuFormRef = ref();

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

const AppMenuFormDialogState = reactive({
    //关闭事件
    handleClose: () => {
        visibleModelValue.value = false
    },
    //触发表单保存
    onOkButtonClick: () => {
        AppMenuFormRef.value.save();
    },
    //表单保存成功事件
    onSaveSuccess: () => {
        emit("save-success")
        visibleModelValue.value = false
    }
})
</script>
<template>
    <div class="jxtech-dialog-form">
        <el-dialog
            v-model="visibleModelValue"
            title="菜单管理"
            :before-close="AppMenuFormDialogState.handleClose"
        >
            <app-menu-form
                ref="AppMenuFormRef"
                :menu-id="menuId"
                :parent-menu-id="parentMenuId"
                @save-success="AppMenuFormDialogState.onSaveSuccess"
            ></app-menu-form>
            <template #footer>
                <jxtech-cancel-button @click="visibleModelValue = false"></jxtech-cancel-button>
                <jxtech-ok-button @click="AppMenuFormDialogState.onOkButtonClick"></jxtech-ok-button>
            </template>
        </el-dialog>
    </div>
</template>